<template>
  <!-- 主容器 -->
  <div id="all" class="viewmiddle_3 dark_bgcolor2">
    <!-- 内容区域 -->
    <div id="nierong">
      <!-- 标题 -->
      <div>
        <h4>三联封面</h4>
      </div>
      <!-- 描述文字 -->
      <el-text>一件切割抖音快手适用的三联封面</el-text>
      <!-- 分割线 -->
      <el-divider />

      <!-- 图片上传区域 -->
      <div class="upload-area margin_top10" style="height: 200px; width: 60%; margin-left: 20%;">
        <el-upload 
          class="upload-demo" 
          drag 
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" 
          multiple
          @change="handleUploadChange"
        >
          <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
          <div class="el-upload__text">
            上传图片文件
          </div>
        </el-upload>
      </div>

      <!-- 结果展示区域 -->
      <div>
        <el-row :gutter="50">
          <el-col :span="12">
            <div>原图预览</div>
            <img v-if="originalImage" :src="originalImage" alt="Original Image" style="width: 100%; max-height: 300px;">
          </el-col>
          <el-col :span="12">
            <div>三联封面预览</div>
            <div v-if="tripletImages.length">
              <img v-for="(image, index) in tripletImages" :key="index" :src="image" alt="Triplet Cover" style="width: 30%; margin: 5px;">
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'

// 响应式变量，用于存储上传的图片和生成的三联封面
const originalImage = ref<string | null>(null)
const tripletImages = ref<string[]>([])

// 处理上传文件变化的函数
const handleUploadChange = (file: any) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    originalImage.value = e.target?.result as string
    // 调用生成三联封面的函数
    generateTripletCovers(e.target?.result as string)
  }
  reader.readAsDataURL(file.raw)
}

// 生成三联封面的函数（示例，具体实现需根据实际需求）
const generateTripletCovers = (imageUrl: string) => {
  // 这里可以调用后端接口或进行前端处理
  // 示例：将原图切成三份
  const image = new Image()
  image.src = imageUrl
  image.onload = () => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    if (ctx) {
      const width = image.width / 3
      const height = image.height
      for (let i = 0; i < 3; i++) {
        canvas.width = width
        canvas.height = height
        ctx.drawImage(image, i * width, 0, width, height, 0, 0, width, height)
        const dataUrl = canvas.toDataURL('image/jpeg')
        tripletImages.value.push(dataUrl)
      }
    }
  }
}
</script>

<style scoped>
/* 内容区域的样式 */
#nierong {
  padding: 20px 40px;
}

/* 主容器样式 */
.viewmiddle_3 {
  border-radius: 10px; /* 设置圆角 */
  margin-top: 50px; /* 设置上外边距 */
  width: 100%; /* 设置宽度为100% */
  height: 100; /* 设置高度 */
}

/* 上传区域样式 */
.upload-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 60%;
  margin-left: 20%;
}

/* 文本输入框样式 */
.qsxtext {
  width: 100%;
  height: 230px;
  margin-top: 10px;
  resize: none;
}

/* 按钮悬停样式 */
.blbut:hover {
  background-color: rgb(192, 191, 189);
}
</style>